<template>
  <!-- <div class="content">
    <el-card class="card"> -->
  <LayoutContent>
    <div class="button">
      <div class="detail">批量新增</div>
      <div>
        <el-button type="primary" @click="clickHandle('batch')">保存</el-button>
        <el-button @click="clickHandle('back')">返回</el-button>
      </div>
    </div>
    <div class="form">
      <el-form :model="form" :rules="rules" ref="formInstall">
        <el-table :data="form.tableData" style="width: 100%" border :header-cell-style="{ height: '25px', fontSize: '15px', backgroundColor: '#f2f2f2' }">
          <el-table-column align="center" label="#" width="80">
            <template #default="{ row, $index }">
              <template v-if="form.tableData.length - 1 === $index">
                <el-icon style="margin-right: 15px; cursor: pointer" @click="clickHandle('add')"><Plus /></el-icon>
              </template>
              <el-icon style="cursor: pointer" @click="clickHandle('minu', $index)"><Minus /></el-icon>
            </template>
          </el-table-column>
          <el-table-column align="center" :prop="item.prop" :label="item.label" v-for="(item, index) in headerList" :key="index">
            <template #default="{ row, $index }">
              <el-form-item :prop="`tableData.${$index}.${item.prop}`" :rules="rules[item.prop]" v-if="item.prop === 'name'">
                <el-input v-model.trim="row[item.prop]" clearable placeholder="请输入考试名称" />
              </el-form-item>
              <el-form-item :prop="`tableData.${$index}.${item.prop}`" :rules="rules[item.prop]" v-if="item.prop === 'stuId'">
                <el-select v-model.trim="row[item.prop]" clearable filterable placeholder="请选择学生">
                  <el-option :label="item.name" :value="item.id" v-for="(item, index) in studentList" :key="index" />
                </el-select>
              </el-form-item>
              <el-form-item :prop="`tableData.${$index}.${item.prop}`" :rules="rules[item.prop]" v-if="item.prop === 'courceId'">
                <el-select v-model.trim="row[item.prop]" clearable filterable placeholder="请选择课程" @change="changeHandle($index)">
                  <el-option :label="item.name" :value="item.id" v-for="(item, index) in courseList" :key="index" />
                </el-select>
              </el-form-item>
              <el-form-item :prop="`tableData.${$index}.${item.prop}`" :rules="rules[item.prop]" v-if="item.prop === 'teaId'">
                <el-select v-model.trim="row[item.prop]" :disabled="isTea" clearable filterable placeholder="请选择教师">
                  <el-option :label="item.name" :value="item.id" v-for="(item, index) in teacherList[$index]" :key="index" />
                </el-select> </el-form-item
              ><el-form-item :prop="`tableData.${$index}.${item.prop}`" :rules="rules[item.prop]" v-if="item.prop === 'term'">
                <el-select v-model.trim="row[item.prop]" clearable filterable placeholder="请选择学期">
                  <el-option label="上学期" :value="1" />
                  <el-option label="下学期" :value="2" />
                </el-select> </el-form-item
              ><el-form-item :prop="`tableData.${$index}.${item.prop}`" :rules="rules[item.prop]" v-if="item.prop === 'grade'">
                <el-select v-model.trim="row[item.prop]" clearable filterable placeholder="请选择年级">
                  <el-option label="大一" :value="1" />
                  <el-option label="大二" :value="2" />
                  <el-option label="大三" :value="3" />
                  <el-option label="大四" :value="4" />
                </el-select>
              </el-form-item>
              <el-form-item :prop="`tableData.${$index}.${item.prop}`" :rules="rules[item.prop]" v-if="item.prop === 'score'">
                <el-input v-model.trim="row[item.prop]" clearable placeholder="请输入分数" />
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
  </LayoutContent>
  <!-- </el-card>
  </div> -->
</template>

<script setup>
import { Plus, Minus } from '@element-plus/icons-vue'
import { inject, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { batchAddApi, getTeacherListApi, getCourseListApi, getStudentListApi } from '@/api/score/index'
import useUserStore from '@/store/user'
const user = useUserStore()

const isTea = inject('isTea')

const headerList = reactive([
  {
    prop: 'name',
    label: '考试名称',
  },
  {
    prop: 'stuId',
    label: '学生',
  },
  {
    prop: 'courceId',
    label: '课程',
  },
  {
    prop: 'teaId',
    label: '教师',
  },
  {
    prop: 'grade',
    label: '年级',
  },
  {
    prop: 'term',
    label: '学期',
  },
  {
    prop: 'score',
    label: '分数',
  },
])
const form = ref({
  tableData: [
    {
      name: '',
      stuId: '',
      score: '',
      courceId: '',
      teaId: '',
    },
  ],
})

const formInstall = ref(null)
const rules = reactive({
  name: [{ required: true, message: '请选择输入考试名称', trigger: ['blur', 'change'] }],
  stuId: [{ required: true, message: '请选择姓名', trigger: ['blur', 'change'] }],
  courceId: [{ required: true, message: '请选择课程', trigger: ['blur', 'change'] }],
  score: [{ required: true, message: '请输入分数', trigger: ['blur', 'change'] }],
  teaId: [{ required: true, message: '请选择教师', trigger: ['blur', 'change'] }],
})

const router = useRouter()
const clickHandle = (type, index) => {
  switch (type) {
    case 'add':
      form.value.tableData.push({ des: '', name: '', teaId: user.user.id, total: 45 })
      break
    case 'minu':
      if (form.value.tableData.length > 1) {
        form.value.tableData.splice(index, 1)
      }
      break
    case 'batch':
      submit()
      break
    case 'back':
      router.back()
      break
  }
}

const submit = async () => {
  if (!formInstall.value) return
  await formInstall.value.validate(async (valid, fields) => {
    if (valid) {
      const res = await batchAddApi(form.value.tableData)
      if (res.code == 200) {
        ElMessage.success(res.msg)
        form.value.tableData = {}
        router.back()
      } else {
        ElMessage.error(res.msg)
      }
    }
  })
}

const teacherList = ref([])
const getTeacherList = async (courceId, index) => {
  const res = await getTeacherListApi({ courceId })
  if (res.code == 200) {
    teacherList.value.splice(index, 1, res.data)
  } else {
    ElMessage.error('获取教师列表数据失败')
  }
}
const courseList = ref([])
const getCourseList = async () => {
  const res = await getCourseListApi()
  if (res.code == 200) {
    courseList.value = res.data
  } else {
    ElMessage.error('获取课程列表数据失败')
  }
}
const studentList = ref([])
const getStudentList = async () => {
  const res = await getStudentListApi()
  if (res.code == 200) {
    studentList.value = res.data
  } else {
    ElMessage.error('获取学生列表数据失败')
  }
}

const changeHandle = (index) => {
  if (!isTea.value) {
    if (form.value.tableData[index].courceId) {
      getTeacherList(form.value.tableData[index].courceId, index)
    }
    form.value.tableData[index].teaId = ''
  }
}

onMounted(() => {
  getCourseList()
  getStudentList()
  if (isTea.value) {
    getTeacherList()
    form.value.tableData[0].teaId = user.user.id
  }
})
</script>

<style scoped lang="scss">
.content {
  .card {
    height: 100%;
    .button {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 2px solid #eee;
    }
    .form {
      margin-top: 10px;
    }
  }
}
</style>
